<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 30px;
        }
        
        td {
            text-align: right;
        }
    </style>
</head>

<body>
    <button id="add-first">第一行添加商品</button>
    <button id="add-last">最后一行添加商品</button>
    <table border="1">

        <tr>
            <th>名称</th>
            <th>图片</th>
            <th>单价</th>
            <th>操作</th>
            <th>总价</th>
        </tr>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>辣条1</td>
                <td><img src="" alt=""></td>
                <td>3.5</td>
                <td><button>-</button>
                    <input type="text" value="1" />
                    <button>+</button>
                    <button>删除</button></td>
                <td>0</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>辣条2</td>
                <td><img src="" alt=""></td>
                <td>3.5</td>
                <td><button>-</button>
                    <input type="text" value="1" class="goodInput" />
                    <button>+</button>
                    <button>删除</button></td>
                <td>0</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>辣条3</td>
                <td><img src="" alt=""></td>
                <td>3.5</td>
                <td><button>-</button>
                    <input type="text" value="1" />
                    <button>+</button>
                    <button>删除</button></td>
                <td>0</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="chooseAll"><button>删除所选</button></td>
                <td colspan="5">0</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        // var newTr = `<tr>
        //     <td>辣条3</td>
        //     <td><img src="" alt=""></td>
        //     <td>3.5</td>
        //     <td><button>-</button>
        //         <input type="text" value="1" />
        //         <button>+</button>
        //         <button>删除</button></td>
        //     <td>0</td>
        // </tr>`;
        // $('tbody').append(newTr);
        // $('tbody tr:last-child').before(newTr);
        // $('tbody tr:first-child').after(newTr);
        // var $input = $('.goodInput');
        // var $prev = $input.prev();
        // var $tr = $input.parents('tr');
        // console.log($tr);
        $('body').on('click', 'button', function(e) {
            // var text = $(this).text();
            var text = $(this).text();
            if (text == '删除所选') {
                delChoose();
            }
        });
        $(".chooseAll").click(function() {
            var $checkboxs = $('tbody tr:not(:last-child) td [type=checkbox]');
            if ($(this).prop('checked') == true) {
                $checkboxs.prop('checked', true);
            } else {
                $checkboxs.prop('checked', false);
            }
        });

        function delChoose() {
            var $checkboxs = $('tbody tr:not(:last-child) td [type=checkbox]');
            for (var i = 0; i < $checkboxs.length; i++) {
                var $c = $checkboxs.eq(i);
                if ($c.prop('checked') == true) {
                    $c.parents('tr').remove();
                }
            }
        }
    </script>
</body>

</html>